<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">

<title>Line Chart Multiple Axes</title>
<link th:href="@{/css/Chart.min.css?v=20210131}" rel="stylesheet" />

<!-- 引入jquery -->
<script type="text/javascript"
	th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
<!-- 引入 charts.js -->
<script type="text/javascript" th:src="@{/ajax/plugins/moment.min.js}"></script>
<script type="text/javascript"
	th:src="@{/ajax/libs/charts/2.9.4/dist/Chart.bundle.min.js}"></script>
<script type="text/javascript"
	th:src="@{/ajax/libs/charts/2.9.4/dist/utils.js}"></script>
<style>
canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
</style>
</head>

<body>
	<div style="width: 75%;">
		<canvas id="canvas"></canvas>
	</div>
	<button id="randomizeData">Randomize Data</button>
	<script>
		var lineChartData = {
			labels : [ 'January', 'February', 'March', 'April', 'May', 'June',
					'July' ],
			datasets : [
					{
						label : 'My First dataset',
						borderColor : window.chartColors.red,
						backgroundColor : window.chartColors.red,
						fill : false,
						data : [ randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor() ],
						yAxisID : 'y',
					},
					{
						label : 'My Second dataset',
						borderColor : window.chartColors.blue,
						backgroundColor : window.chartColors.blue,
						fill : false,
						data : [ randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor(), randomScalingFactor(),
								randomScalingFactor() ],
						yAxisID : 'y1'
					} ]
		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, {
				type : 'line',
				data : lineChartData,
				options : {
					responsive : true,
					interaction : {
						mode : 'index'
					},
					stacked : false,
					plugins : {
						title : {
							display : true,
							text : 'Chart.js Line Chart - Multi Axis'
						}
					},
					scales : {
						y : {
							type : 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display : true,
							position : 'left',
						},
						y1 : {
							type : 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display : true,
							position : 'right',

							// grid line settings
							gridLines : {
								drawOnChartArea : false, // only want the grid lines for one axis to show up
							},
						},
					}
				}
			});
		};

		document.getElementById('randomizeData').addEventListener('click',
				function() {
					lineChartData.datasets.forEach(function(dataset) {
						dataset.data = dataset.data.map(function() {
							return randomScalingFactor();
						});
					});

					window.myLine.update();
				});
	</script>
</body>

</html>
